const leftSlide = document.querySelector('.left-slide')
const rightSlide = document.querySelector('.right-slide')
const downBtn = document.querySelector('.down-button')
const upBtn = document.querySelector('.up-button')
const length = rightSlide.querySelectorAll('div').length

let activeIndex = 0

downBtn.addEventListener('click', () => {
    changeSlide('down')
})
upBtn.addEventListener('click', () => {
    changeSlide('up')
})

var changeSlide = function (way) {
    if (way === 'down') activeIndex++
    if (way === 'up') activeIndex--
    if (activeIndex < 0) activeIndex = length - 1
    if (activeIndex >= length) activeIndex = 0
    leftSlide.style.transform = `translateY(${(-300 + activeIndex * 100)}vh)`
    rightSlide.style.transform = `translateY(${(-activeIndex * 100)}vh)`
}